<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
                form.big
            {
                width: 20%

            }
            td div {
             width:200px;
    }
    </style>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
   <link rel="stylesheet" href="/static/polls/js/bootstrap.min.css">
</head>
<body>

<div id="users">

    <form id  = "userform" class="big" name ="users" method="post">
       锁定账号列表
        <br><br>
       {% csrf_token %}
        <div >
                <table border="1" class="table table-striped table-hover table-bordered">
         <tr>
       {% for user in userlist %}
                    {% if forloop.counter0|divisibleby:"2"  %}
                             </tr><tr>
                             <td>
                             <div class="form-check">
                                 <input name="selected_user" type="checkbox"  id="{{ user }}" value="{{ user }}" />
                              <label class="form-check-label" for="{{ user }}">  <strong> {{ user  }} </strong>
                              </label> </div>
                        </td>
                     {% else %}
                             <td>
                                 <div class="form-check">
                                 <input name="selected_user" type="checkbox"  id="{{ user }}" value="{{ user }}" />
                                  <label class="form-check-label" for="{{ user }}">  <strong> {{ user   }} </strong>
                                </label>
                                 </div>
                             </td>
                      {% endif %}
       {% endfor %}
        </table>
            </div>
       <br>

       <button type="submit" class="btn btn-success" id="unlock" style="align-content: center">解除锁定</button>

   </form>

</div>
<br>

<div id="test"> </div>

<script src="/static/polls/js/2.1.4/jquery.min.js"></script>
<script src="/static/polls/js/popper.min.js"></script>
<script src="/static/polls/js/bootstrap.min.js" ></script>

<script>

  $('#userform').submit(function(event){

      event.preventDefault();

      $.post(
              'unlock/',
              $(this).serialize(), function(response){
                  $.ajax({
                      type: "get",      //data 传送数据类型。post 传递
                      url: "/polls/locked_user",  // yii 控制器/方法
                      cache: false,
                      success: function (response) {
                      $('#details').html(response);
                      }
                    })

              }
      )
  })




</script>


</body>
</html>